<script setup>
import { ref } from "vue";
//const count = ref (0)
const my_name = ref("yqr")

setTimeout(() => {
  my_name.value = "cyc"
  todo.title = "玩蛋仔派对"
}, 3000)

const todo = {
  title: '个人生活',
  date: '2025-04-01 16:27',
  description: '锻炼30分钟、阅读30页书籍、整理房间并清理书桌',
  createdAt: '2025-04-01 16:27'
}
const count = ref(0)

const clickHandle = () => {
  count.value++
}
</script>



<template>
  <input :value="text" @input="(event) => { text = event.target.value }">
  </input>
  <button @click="clickHandle">Add 1</button>
  <p>Count is:{{ count }}</p>
  {{ my_name }}
  <div class="todo-detail">
    <h4>{{ todo.title }}</h4>
    <p><strong>时间: </strong>{{ todo.date }}</p>
    <p><strong>详细内容: </strong>{{ todo.description }}</p>
    <p>{{ todo.createdAt }}</p>
    <span>删除</span>
  </div>
  <form class="create" @submit.prevent="handleSubmit(todo_form)">
    <h3>添加新的待办事项</h3>
    <label>待办事项:</label>
    <input type="text" v-model="todo_form.title" /></input>
    <label>时间：</label>
    <input type="datetime-local" v-model="todo_form.date" /></input>
    <label>详细内容:</label>
    <input type="text" v-model="todo_form.description" /></input>
    <button>添加</button>
  </form>
</template>



<style>
:root {
  --primary: #1aac83;
  --error: #e7195a;
}

.todo-detail {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.todo-detail h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.todo-detail p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.todo-detail span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}
</style>
